﻿@model CodeTemplate2.Models.Employee.EmployeeModel
@{
    ViewBag.Title = "View Employee Detail";
}

@section Styles {
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/ecmascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
    @*<link href="@Url.Content("~/Content/site2.css")" rel="stylesheet" type="text/css" />*@

    <script type="text/javascript">
        $(function() {
            $.datepicker.setDefaults( $.datepicker.regional[ "th" ] );
            $( "#BirthDate" ).datepicker({
                buttonImage: '../../images/datepicker.png',
                changeMonth: true, changeYear: true,
                defaultDate: new Date(),
                maxDate: new Date(),
                yearRange: 'c-70:c',
                minDate: '-71Y'
            });
            $('#BindingBranchCode').change(function() {
                var searchKey = $('#BindingBranchCode').val();
                //alert(searchKey);
                $.ajax({
                    url: '@Url.Action("GetLookup", "Employee")',
                    type: 'GET',
                    data: 'searchKey=' + searchKey,
                    success: function(result){                               
                        if(result != "MoreOne"){
                            var BindingBranch = result.split("|");
                            //alert(BindingBranch[0]);
                            $('#Branch').val(BindingBranch[0]);
                            $('#BindingBranchCode').val(BindingBranch[1]);
                            $('#BindingBranchName').val(BindingBranch[2]);
                        }
                        else if (result == "MoreOne") {
                            $('#Branch').val("");
                            $('#BindingBranchCode').val("");
                            $('#BindingBranchName').val("");
                            popitup('@Url.Action("Popup", "Employee")', "Branch", searchKey);
                        }
                        else{
                            $('#Branch').val("");
                            $('#BindingBranchCode').val("");
                            $('#BindingBranchName').val("");
                            popitup('@Url.Action("Popup", "Employee")', "Branch", "");
                        }
                    }
                });
            });

            $('#BranchBtn').on("click", function () {
                popitup('@Url.Action("Popup", "Employee")', "Branch", "");
            });
        });
        
        function popitup(url,windowName, key) {
            if (key!="") { url = url + "?searchKey=" + key; }
            newwindow=window.open(url,windowName,'height=600,width=450');
            if (window.focus) {newwindow.focus()}
            return false;
        }
        
    </script>

    @*Style for lookup*@
    <style type="text/css">
        #BindingBranchCode
        {
            width:50px;
        }

        #BindingBranchName
        {
            width:150px;
            background-color:#E8E8E8;
        }
    </style>
}

<h2>Employee Detail</h2>


@using (Html.BeginForm("Update", "Employee", FormMethod.Post, new { @id = "form-employee" }))
{
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>EmployeeModel</legend>
        <div class="two-column-container">
            <div class="texteditor">
                @Html.LabelFor(model => model.EmpId)
                @Html.TextBoxFor(model => model.EmpId)
                @Html.HiddenFor(model => model.Id)
                <input type="hidden" name="Mode" value="Edit" />
                <input type="hidden" name="OldValue" value="@(Model.EmpId == null ? "" : Model.EmpId )" />
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Title)
                @Html.RadioButtonFor(model => model.Title, "1") Mr.
                @Html.RadioButtonFor(model => model.Title, "2") Miss.
                @Html.RadioButtonFor(model => model.Title, "3") Mrs.
            </div>
        @*</div>*@

@*        <div class="two-column-container">*@
            <div class="texteditor">
                @Html.LabelFor(model => model.Name)
                @Html.TextBoxFor(model => model.Name)
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Surname)
                @Html.TextBoxFor(model => model.Surname)
            </div>
        @*</div>*@

        @*<div class="two-column-container">*@
            <div class="texteditor">
                @Html.LabelFor(model => model.JobTitle)
                @Html.DropDownListFor(model => model.JobTitle, Model.BindingJobtitle)
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Status)
                @Html.RadioButtonFor(model => model.Status, "1") Active
                @Html.RadioButtonFor(model => model.Status, "2") InActive
            </div>
        @*</div>*@

        @*<div class="two-column-container">*@
            <div class="texteditor">
                @Html.LabelFor(model => model.MarriedStatus)
                @Html.RadioButtonFor(model => model.MarriedStatus, "1") Single
                @Html.RadioButtonFor(model => model.MarriedStatus, "2") Married
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.BirthDate)
                @Html.EditorFor(model => model.BirthDate, new { @readonly="readonly" })
            </div>
        @*</div>
        <div class="two-column-container">*@
            <div class="texteditor">
                @Html.LabelFor(model => model.Branch)
                @Html.HiddenFor(model => model.Branch, "1")
                
                @Html.Editor("BindingBranchCode")
                <input id="BranchBtn" type="button" value=".." />                
                @Html.Editor("BindingBranchName")                                
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Address)
                @Html.TextAreaFor(model => model.Address)

            </div>
        </div>
        <div class="bottom-menu clear">
            <input type="button" name="btnBack" value="Cancel" id="button-back" onclick="location.href='@Url.Action("ListEmployee", "Employee")    '"/>
            <input type="Button" value="Save" id="button-save" onclick="JavaScript: SaveButtonClick()" />
            <input type="button" name="btnDelete" value="Delete" id="button-delete" onclick="JavaScript: DeleteButtonClick()" />
        </div>
    </fieldset>
}

<div id="confirm-delete" title="Confirm delete." style="display: none">
    <span>Do you want to delete?</span>
</div>

<div id="confirm-save" title="Confirm save." style="display: none">
    <span>Do you want to save?</span>
</div>

<script type="text/javascript">
    function DeleteButtonClick() {
        $("#confirm-delete").dialog({
            modal:true,
            buttons: {
                Yes: function () {
                    $(this).dialog("close");

                    $.post('@Url.Action("DeleteEmployeeById", "Employee")',$("#form-employee").serialize(),function (data) {
                        if (data == "Success") {
                            window.location.href = '@Url.Action("ListEmployee", "Employee")';
                        }                        
                    });

                },
                No:function(){
                    $(this).dialog("close");
                }
            }
        })
    }

    function SaveButtonClick() {
        $("#confirm-save").dialog({
            modal: true,
            buttons: {
                Yes: function () {
                    $(this).dialog("close");
                    $("#form-employee").submit();
                },
                No: function () {
                    $(this).dialog("close");
                }
            }
        })
    }
</script>
